<template>
  <div class="page">
    <s-header name="巡查记录详情"></s-header>
    <div class="card-box">
      <div class="header-title">巡查信息</div>
      <van-divider />
      <div class="content">
        <van-cell-group>
          <van-cell title="巡查日期" :value="recordForm.checkDate" :border="false" />
          <van-cell title="到场部门" :value="recordForm.presentDept" :border="false" />
          <van-cell title="到场人员" :value="recordForm.presentPerson" :border="false" />
          <van-cell title="检查内容" :value="recordForm.checkContent" :border="false" />
        </van-cell-group>
      </div>
    </div>
    <div class="card-box">
      <div class="header-title">相关材料</div>
      <van-divider />
      <div v-for="file in recordForm.others" :key="file.id" class="item-list">
        <div class="item-image">
          <van-image width="15" height="15" :src="imgSrc" />
        </div>
        <div class="item-name" @click="handleDownload(file.url, file.suffix)">
          {{ file.name }}
        </div>
        <div class="item-size">({{ converSize(file.size) }})</div>
      </div>
    </div>
    <div class="card-box">
      <div class="header-title">到场图片</div>
      <van-divider />
      <div class="item-list">
        <div v-for="file in recordForm.photos" :key="file.id" style="margin-right: 10px" @click="handleReview(file.url)">
          <van-image width="55" height="55" :src="`${fileServerPrefix}${file.url}`" />
        </div>
      </div>
    </div>
    <div class="card-box">
      <div class="header-title">巡查结果</div>
      <van-divider />
      <van-cell-group>
        <van-cell title="巡查结果" :border="false">
          {{ filterResult(recordForm.patrolResult) }}
        </van-cell>
      </van-cell-group>
    </div>
    <div class="card-box">
      <div class="header-title">办理意见</div>
      <van-divider />
      <div class="content">{{ recordForm.handleOpinions }}</div>
    </div>
    <div class="card-box">
      <div class="header-title">提交信息</div>
      <van-divider />
      <van-cell-group>
        <van-cell title="提交人" :value="recordForm.createUser" :border="false" />
        <van-cell title="提交时间" :value="recordForm.createTime" :border="false" />
        <van-cell title="提交部门" :value="recordForm.deptName" :border="false" />
      </van-cell-group>
    </div>
    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs, computed } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import imgSrc from '@/assets/Images/file-icon.png'
import { ImagePreview } from 'vant'
import { getPatrolSceneFile, getPatrolScenePhoto } from '@/service/patrol'
export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const state = reactive({
      imgSrc: imgSrc,
      recordForm: {
        checkData: '',
        presentDept: '',
        presentPerson: '',
        checkContent: '',
        others: [],
        photos: [],
        patrolResult: '',
        handleOpinions: '',
        createUser: '',
        createTime: '',
        deptName: '',
      },
    })
    onMounted(() => {
      if (route.query.dataList) {
        const data = JSON.parse(route.query.dataList)
        state.recordForm = { ...data }
        getFileList(state.recordForm.id)
        getPhotoList(state.recordForm.id)
      }
    })
    const getFileList = async (id) => {
      const res = await getPatrolSceneFile(id)
      if (res.success) {
        state.recordForm.others = res.body.obj
      }
    }
    const getPhotoList = async (id) => {
      const res = await getPatrolScenePhoto(id)
      if (res.success) {
        const photos = res.body.obj
        // photos.forEach((res) => {
        //   res.url = fileServerPrefix.value + res.url;
        // });
        state.recordForm.photos = photos
      }
    }
    const handleBack = () => {
      router.go(-1)
    }
    const handleClick = (item) => {
      state.cardList.forEach((res) => {
        if (item.id === res.id) {
          res.selected = true
        } else {
          res.selected = false
        }
      })
    }
    store.dispatch('getFileServerPrefix')
    const handleReview = (url) => {
      const imgUrl = fileServerPrefix.value + url
      ImagePreview({
        images: [imgUrl],
        showIndex: true,
        showIndicators: true,
        closeable: true,
      })
    }
    const handleDownload = (url, suffix) => {
      const imgUrl = fileServerPrefix.value + url
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        ImagePreview({
          images: [imgUrl],
          showIndex: true,
          showIndicators: true,
          closeable: true,
        })
        // } else if (suffix === "pdf") {
        //   state.pdfSrc = pdf.createLoadingTask(imgUrl);
        //   state.pdfSrc.then((pdf) => {
        //     state.numPages = pdf.numPages;
        //   });
      } else {
        let a = document.createElement('a')
        a.href = imgUrl
        a.click()
      }
    }
    const fileServerPrefix = computed(() => {
      return store.state.fileServerPrefix
    })
    // 巡查结果过滤
    const filterResult = (value) => {
      const dataMap = {
        32: '无问题',
        33: '追加整改',
        99: '挂起',
      }
      return dataMap[value]
    }
    return {
      fileServerPrefix,
      ...toRefs(state),
      handleBack,
      handleClick,
      handleDownload,
      filterResult,
      getPhotoList,
      getFileList,
      handleReview,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .card-box {
    margin-top: 16px;
    padding: 4px;
    background: #ffffff;
    border-radius: 10px;
    .header-title {
      padding: 16px 0 0 16px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    /deep/.van-cell__title {
      font-size: 16px;
      color: #9297ae;
    }
    /deep/.van-cell__value {
      font-size: 16px;
      color: #2e3f6a;
    }
    .item-list {
      padding: 10px 16px;
      display: flex;
      .item-image {
        margin-right: 5px;
      }
      .item-name {
        margin-right: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #3487f6;
      }
      .item-size {
        font-size: 14px;
        font-weight: 400;
        color: #9297ae;
      }
    }
    .content {
      padding: 0 16px;
      font-size: 15px;
      font-weight: 400;
      line-height: 25px;
      color: #2e3f6a;
    }
  }
  .btn-group {
    padding: 20px 0;
    .cus-btn {
      font-size: 16px;
      width: 100%;
    }
  }
}
</style>